<div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">
        <!--<a href={% url 'searchapi' %}>
            <button class="btn btn-default" type="button">可用API</button>
        </a>-->
        <button class="btn btn-default" type="button" id="ajaxqueryapi">可用API</button>
    </div>
    <div class="panel-body">
        <!-- Table -->
        <table class="table">
            <tr>
                <th width="70">apitype</th>
                <th width="850">apikey</th>
            </tr>
        </table>
        <table class="table" id="tableviewapi">
            <!--<tr>
                <th data-field="Name" data-editable="true">apitype</th>
                <th data-field="ParentName">apikey</th>
            </tr>
            {% for apilist in apilist.all %}
            <tr>
                <td>{{ apilist.apitype }}</td>
                <td>{{ apilist.apikey }}</td>
            </tr>
            {% endfor %}
            -->
        </table>
    </div>
    <!-- 新增api -->
    <div>
        <form class="navbar-form navbar-left" name="addapi" action="{% url 'addapi' %}" method="post">
            {% csrf_token %}
            <div class="form-group">
                <input type="text" class="form-control" placeholder="apitype" name="apitype" required>
                <input type="text" class="form-control" placeholder="apikey" name="apikey" required>
            </div>
            <button type="submit" class="btn btn-default">确认添加</button>
        </form>
    </div>



    <!--引入bootstrap-->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap-theme.min.css">
    <!--引入jquery-->
    <script src="/static/js/jquery-3.3.1.min.js"></script>
    <script src="/static/js/jquery-3.3.1.js"></script>
    <script src="/static/js/ajaxqueryapi.js.old"></script>

    <script>
        $("#ajaxqueryapi").click(function() {
            $.ajax({
                url: 'ajax_query_api', //后台请求的数据
                dataType: 'JSON', //数据格式
                type: 'GET', //请求方式
                async: false, //是否异步请求
                success: function(result) { //如果请求成功，返回数据。
                    var list = result.api;
                    var str1 = ""; //声明str1，防止产生undefined
                    for (var i = 0; i < list.length; i++) { //遍历
                        str1 += "<tr cate-id='0' fid='0'>" +
                            "<td>" + list[i].apitype + "</td>" + //i代表下标，获取数据中的下标为i的1的值
                            "<td>" + list[i].apikey + "</td>"; //i代表下标，获取数据中的下标为i的2的值
                        //"<td>" + list[i].n+"</td>";    //i代表下标，获取数据中的下标为i的n的值，1-n是属性名
                    }
                    tableviewapi.innerHTML = str1; //将数据写入html中
                },
                error: function(arg1) {
                    alert("url错误");
                    console.log(arg1);
                }
            })
        })
    </script>